<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <!-- 面包屑 -->
            <Breadcrumb>
                <BreadcrumbItem to="/admin/home">主页</BreadcrumbItem>
                <BreadcrumbItem>用户管理</BreadcrumbItem>
            </Breadcrumb>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
              <table class="tender-table table-border table-hover">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>头像</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>角色</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,i) in userList" :key="i">
                        <td>{{item.uId}}</td>
                        <td class="user-img"><img :src="item.uAvatar" alt=""></td>
                        <td>{{item.username}}</td>
                        <td>{{item.uName}}</td>
                        <td>{{item.uRole}}</td>
                        <td class="user-action">
                          <a class="user-info" href="javascript:void(0);" @click.prevent="findById(item.uId)">详情</a>
                          <span class="list-type">
                              <a-popconfirm
                                  title="确认删除？"
                                  @confirm="deleteById(item.uId)"
                                  okText="Yes"
                                  cancelText="No">
                                  <a href="javascript:void(0)" class="shelf">删除</a>
                              </a-popconfirm>
                          </span>
                        </td>
                    </tr>
                </tbody>
              </table>
              <!-- 查看用户详情 -->
              <Modal
                v-model="modal1"
                :title="user.uName + ' 用户详情'">
                <div class="userinfo-item">
                  <div class="user-item">
                    <img :src="user.uAvatar" alt="">
                    <p>{{user.uName}}</p>
                  </div>
                  <p>用户名：{{user.username}}</p>
                  <p>角色：{{user.uRole}}</p>
                  <p>性别：{{user.uGender}}</p>
                  <p>简介：{{user.uBio}}</p>
                  <p>注册时间：{{user.uCreateTime | dataFormat}}</p>
                  <p>上次登录时间：{{user.uLastLogintime | dataFormat}}</p>
                </div>
              </Modal>
              <div class="page-all">
                  <Page :total="allPages.total" :page-size="pageSize"
                  :current="pageNum" @on-change="changePage"/>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'goods',
  data () {
    return {
      pageSize: 4, // 每页显示多少条
      allPages: [], // 存放售卖商品分页的信息
      pageNum: 1, // 默认展示第一页数据
      userList: [],
      user: '',
      modal1: false
    }
  },
  created () {
    this.findAll()
  },
  methods: {
    // 查询所有用户列表
    findAll () {
      this.$axios({
        url: 'users/findAll',
        method: 'get',
        params: {
          pageNo: this.pageNum,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.userList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变用户列表页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNum = index
      this.findAll()
    },
    // 根据id删除用户
    deleteById (id) {
      this.$axios({
        url: 'users/deleteById',
        method: 'get',
        params: {
          uId: id
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findAll()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据id查询用户详情
    findById (id) {
      this.user = ''
      this.modal1 = true
      this.$axios({
        url: 'users/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.user = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.user-img img {
    width: 45px;
    height: 45px;
}
/* 主要内容区域 */
.content-inner{
    width: 100%;
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.tender-table{
    width: 100%;
    border-collapse: collapse;
}
.tender-table tr{
    border-bottom:1px solid #eee;
    text-align: left;
}
.tender-table thead tr{
    border-top:1px solid #eee;
    border-bottom:2px solid #eee;
}
.tender-table th,.tender-table td{
    padding:7px 10px;
    text-align: center;
}
.table-border{
    border:1px solid #eee;
}
.table-border th,.table-border td{
    border:1px solid #eee;
}
.table-hover thead tr{
    background-color: #f1f1f1;
}
.table-hover tbody tr:hover{
    background-color: #f1f1f1;
}
.user-action a {
  display: inline-block;
  color:#fff;
  font-size: 14px;
  padding: 3px 6px;
  background: #ed4014;
  border-radius: 5px;
}
.user-action .user-info {
  margin-right: 5px;
  background: #2d8cf0;
}
.user-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.user-item img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
